<template>
  <el-select class="header-menu-select" popper-class="header-menu-select-popper"
             v-model="activeMenu" @change="selectItem">
    <el-option v-show="activeMenu !== $rp.COMMUNITIES" label="社区" :value="$rp.COMMUNITIES"/>
    <el-option v-show="activeMenu !== $rp.SPACES" label="学习空间" :value="$rp.SPACES"/>
    <el-option v-show="false" label="学习空间" :value="$rp.SPACES"/>
    <el-option v-show="false" label="学习空间" :value="$rp.EXPLORE"/>
    <el-option v-show="false" label="学习空间" :value="$rp.COLLECTED"/>
    <el-option v-show="false" label="学习空间" :value="$rp.JOINED"/>
    <el-option v-show="activeMenu !== $rp.SEARCH" label="搜索" :value="$rp.SEARCH"/>
    <el-option v-show="false" label="消息中心" :value="$rp.NOTIFICATIONS"/>
    <el-option v-show="false" label="用户中心" :value="$rp.USERS"/>
    <el-option v-show="false" label="意见反馈" :value="$rp.FEEDBACK"/>
    <el-option v-show="activeMenu !== $rp.ANNOUNCEMENTS" label="公告" :value="$rp.ANNOUNCEMENTS"/>
  </el-select>
</template>

<script>
export default {
  name: 'HeaderMenuSelect', // 小屏幕下的页头导航选择
  computed: {
    activeMenu: {
      get() { return this.$route.path.split('/')[1] || this.$rp.SPACES; },
      set(val) { return val; },
    },
  },
  methods: {
    selectItem(val) { this.$root.$emit('routerPush', { path: `/${val}` }); },
  },
};
</script>

<style lang="scss">
.el-select.header-menu-select .el-input {
  width: 5.4rem;

  &.is-focus .el-input__inner { background-color: #f2f2f2; }

  .el-input__inner {
    border: none;
    line-height: 2rem;
    height: 2rem;
    padding-left: .5rem;
    padding-right: 1.3rem;
    font-weight: 600;
    color: #707070;
  }
  .el-input__icon {
    font-size: .75rem;
    line-height: 2rem;
    width: .75rem;
  }
}
.el-select-dropdown.header-menu-select-popper {
  .el-select-dropdown__wrap {
    overflow: hidden;
    margin: 0 !important;
  }
  .el-select-dropdown__item {
    padding: 0;
    text-align: center;
  }
}
</style>
